<template>
  <view class="often-page flex-column">
    <view class="tips">
      <wd-notice-bar
        text="常点指的是累计已点三次及以上的菜"
        prefix="check-outline"
        type="info"
        color="#ffc1c1"
        background-color="#fff"
      />
    </view>
    <!--  <wd-button size="small" hairline plain @click="joinMenu(item)">
            {{
              nameList.map((n) => n.name).includes(item.name)
                ? "移出菜单"
                : "加入菜单"
            }}
          </wd-button> -->
    <view
      class="dish-list p-32 flex"
      v-if="oftenList && oftenList.length !== 0"
    >
      <view
        v-for="(item, index) of oftenList"
        class="dish-item mt-15 p-16"
        :class="{ 'ml-32': index % 2 !== 0 }"
        :key="index"
      >
        <view class="header-wrap flex ml-10">
          <wd-img
            :width="48"
            :height="48"
            round
            enable-preview
            :src="item.url"
          />
          <wd-icon
            name="chevron-right"
            size="22px"
            color="#ddd"
            @click="toDetail(item)"
          ></wd-icon>
        </view>
        <view class="name ml-10 mt-32">{{ item.name }}</view>
        <view class="times mt-16 flex-column-center">
          <wd-img
            custom-class="mr-10"
            :width="24"
            :height="24"
            v-if="item.rank"
            :src="staticImgUrl[item.rank]"
          />
          累计已点
          <span style="color: #ff6b6b">&nbsp;{{ item.totalTime }}&nbsp;</span>
          次
          <view :class="['operate', { rank: index < 3 }]">
            <wd-icon
              name="add"
              size="16px"
              color="#ff6b6b"
              @click="joinMenu(item)"
              v-if="!nameList.map((n) => n.name).includes(item.name)"
            ></wd-icon>
            <wd-icon
              name="remove"
              size="16px"
              @click="joinMenu(item)"
              v-else
            ></wd-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="empty-page" v-else>
      <wd-status-tip
        image="https://registry.npmmirror.com/wot-design-uni-assets/*/files/search.png"
        tip="这里还没有常点的菜品，快多多点菜吧~"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

import { getMenuList } from "../../../api/menu";
import tab from "../../../utils/tab";
import { useDishList } from "../../../store/dishList";

const emits = defineEmits(["addNameList"]);
const props = defineProps({
  hasInList: Array,
});

const oftenList = ref([]);

function toDetail(item) {
  tab.navigateTo(`method?id=${item.id}`);
}

const nameList = ref(props.hasInList);
let dishItem = useDishList();

function joinMenu(item) {
  let cIndex = nameList.value.findIndex((n) => n.name === item.name);
  let dIndex = dishItem.list.findIndex((d) => d.name === item.name);
  if (dIndex !== -1) {
    dishItem.removeItem(dIndex);
  }
  if (cIndex !== -1) {
    nameList.value.splice(cIndex, 1);
    return;
  }
  if (nameList.value.length === 4) {
    toast({
      title: "一次最多只能选四个菜哦~",
      icon: "error",
    });
    return;
  }
  nameList.value.push({
    ...item,
    num: 1,
    flag: true,
  });
  dishItem.addItem({
    ...item,
    num: 1,
    flag: true,
  });
  emits("addNameList", nameList.value);
  console.log(dishItem.list, "===");
}

const staticImgUrl = {
  1: "",
  2: "",
  3: "//lf3-fe.ecombdstatic.com/obj/ecom-cdn-default/cmp/ecom/strategy-market/static/svg/rank_3.017c35ec.svg",
};

function getList() {
  getMenuList({
    oftenFlag: true,
  }).then((res) => {
    if (res.code === 0) {
      res.data.forEach((item, index) => {
        if (index < 3) {
          item.rank = index + 1;
        }
      });
      oftenList.value = res.data;
    }
  });
}

onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
.often-page {
  height: 100%;
  background-color: #f8f8f8;

  .dish-list {
    padding-top: 16rpx;
    flex: 1;
    overflow-y: auto;
    flex-wrap: wrap;

    .dish-item {
      flex: 1;
      min-width: 45%;
      max-width: 48%;
      border-radius: 24rpx;
      border: 1px solid $shallow-color;
      background-color: #fff;
      box-sizing: border-box;

      .header-wrap {
        justify-content: space-between;
      }

      .times {
        font-size: 24rpx;
        color: $text-shallow-color;
        position: relative;

        .operate {
          position: absolute;
          right: 8rpx;
          bottom: 0;

          &.rank {
            bottom: 8rpx;
          }
        }
      }
    }
  }
}
</style>
